<!-- 分销返佣明细 -->
<template>
	<view class="return-com" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<!-- 顶部导航切换 -->
		<u-sticky>
			<view class="subsection">
				<view
					class="subsection-item "
					:class="{ 'subsection-item-color': item.type == subId ? true : false }"
					v-for="(item, index) in list"
					:key="index"
					@click="subChange(item.type)"
				>
					{{ item.name }}
				</view>
			</view>
			<view class="return_tip" @click="goAddDistri" v-if="vuex_user.type == 1 || vuex_user.type == 3">
				<view class="re_txt">如需提现，请成为分销商</view>
				<view>>></view>
			</view>
		</u-sticky>
		<view class="return-com-detailed">
			<view class="com-item" v-for="(item, index) in countList" :key="index">
				<text class="iconfont-e6ce iconfont" style="font-size: 32rpx;"></text>
				<view class="com-title">{{ item.name }}: {{ item.code }}{{ vuex_count[item.key] || 0 }}</view>
			</view>
		</view>
		<return-view :dataList="dataList"></return-view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
import { pagingMixin } from '@/mixins/pagingMixin.js';
import { mapState } from 'vuex';
import returnView from '../../components/returnView.vue';
export default {
	mixins: [pagingMixin],
	components: {
		returnView
	},
	data() {
		return {
			list: [
				{
					name: '全部',
					type: -1
				},
				{
					name: '返佣',
					type: 1
				},
				{
					name: '提现',
					type: 2
				},
				{
					name: '退回',
					type: 3
				}
			],

			subId: '1', //当前顶部导航下标
			countList: [
				{
					name: '可提现',
					code: '￥',
					key: 'sure_cash'
				},
				{
					name: '已提现',
					code: '￥',
					key: 'already_cash'
				},
				// {
				// 	name: '已退回',
				// 	code: '￥',
				// 	key: 'return'
				// },
				{
					name: '总记录',
					code: '',
					key: 'total_count'
				},
				{
					name: '历史累计',
					code: '￥',
					key: 'total_cash'
				}
			]
			// orderTypeObj: {
			// 	0: '旅游订单',
			// 	1: '实物订单'
			// },
			// statusObj:{
			// 	1:'已到账',
			// 	2:'已退回',
			// 	0:'未到账'
			// }
		};
	},
	onLoad: function() {
		//TODO
		this.initPage();
	},
	onReachBottom: function() {
		this.loadMore();
	},

	computed: {
		...mapState(['vuex_count'])
	},

	methods: {
		// 顶部导航切换
		subChange(subId) {
			this.subId = subId;
			this.initPage();
		},
		// 初始化页面
		initPage() {
			this._init_data('GetUsersCommission', {
				status: this.subId
			});
		},
		// 触发分页
		loadMore() {
			this._load_data();
		},
		goAddDistri() {
			if (this.vuex_user.type === 1) {
				this.$linkTo('/package/user/user-info/index?type=applyDist','redirectTo');
			} else if (this.vuex_user.type == 3) {
				uni.showModal({
					content: '审核中...',
					showCancel: false
				});
			}
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.subsection {
	display: flex;
	padding: 10rpx 30rpx 20rpx;
	background-color: #fff;
	.subsection-item {
		flex: 1;
		height: 60rpx;
		border: 1rpx solid var(--color);
		border-right: 0;
		text-align: center;
		line-height: 60rpx;
		color: var(--color);
	}

	.subsection-item-color {
		border: 0;
		background-color: var(--color);
		color: #fff;
	}

	.subsection-item:nth-last-child(1) {
		border: 1rpx solid var(--color);
		border-radius: 0px 8rpx 8rpx 0px;
	}

	.subsection-item:nth-child(1) {
		border: 1rpx solid var(--color);
		border-right: 0;
		border-radius: 8rpx 0px 0px 8rpx;
	}
}
.return_tip {
	background-color: #19be6b;
	color: #fff;
	font-size: 24rpx;
	padding: 8rpx 10rpx;
	display: flex;
	justify-content: space-between;
}
.return-com-detailed {
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	padding: 24rpx 30rpx 4rpx;
	margin-bottom: 14rpx;

	.com-item {
		display: flex;
		width: 50%;
		align-items: center;
		// margin-right: 20rpx;
		margin-bottom: 15rpx;

		.com-title {
			color: var(--price);
			font-size: 26rpx;
			margin-left: 10rpx;
		}
	}
}
</style>
